import React, { useEffect, useState } from 'react'
import { Card, Table } from 'antd'
import { getData } from '../../api'

const TableCom = () => {
  const [data, setData] = useState([])
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '文章标题',
      dataIndex: 'title',
      key: 'title'
    }
  ]

  useEffect(() => {
   getTableData()
  }, [])

  const getTableData = async () => {
    const data = await getData()
    setData(data)
  }

  return (
    <>
      <Card hoverable style={{marginTop:'15px'}}>
        <Table dataSource={data} rowKey={'id'} columns={columns} pagination={false} />
      </Card>
    </>
  )
}

export default TableCom
